<template>
  <div class="add-notemarke">
    <div class="main">
      <div class="list-herder">
        <el-page-header @back="goBack" :content="title"> </el-page-header>
      </div>
      <el-form
        ref="form"
        :model="Form"
        label-width="80px"
        label-position="top"
        inline
      >
        <el-form-item label="账号">
          <el-select v-model="Form.type" placeholder="请选择邮件类型">
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in acType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板">
          <el-select v-model="Form.state" placeholder="--请选择邮件模板--">
            <el-option
              :label="item"
              :value="index"
              v-for="(item, index) in resType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接收人" class="linkmanren">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="例如：13364892780|雷军"
            v-model="Form.result"
            :autosize="{ minRows: 2, maxRows: 5 }"
            @focus="changeFocus"
            @blur="changeBlur"
          >
          </el-input>
          <div class="linkman-abs" v-if="isTable">
            <adsoluteMember
              @closePop="closePop"
              @addData="addData"
              :clumnData="clumnData"
              :rowData="rowData"
            ></adsoluteMember>
          </div>
        </el-form-item>
        <el-form-item label="短信内容" class="theme">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="Form.set"
            :maxlength="500"
            :autosize="{ minRows: 5, maxRows: 10 }"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <can_save @saveData="saveData" @cancelData="cancelData"></can_save>
    </div>
  </div>
</template>
<script>
import can_save from "../../components/components_wxq/can_save.vue";
import storage from "../../utils/storage";

import adsoluteMember from "../../components/components_wxq/adsoluteMember.vue";
export default {
  name: "addEmailMark",
  components: {
    can_save,

    adsoluteMember,
  },
  data() {
    return {
      Form: {
        title: "",
        type: "",
        state: "",
        start: "",
        end: "",
        set: "",
        budget: "",
        target: "",
        result: "",
        content: "",
      },
      clumnData: [
        { name: "title", lable: "标题", width: 100 },
        { name: "date", lable: "发布时间", width: 200 },
        { name: "num", lable: "成员", width: 100 },
        { name: "state", lable: "状态", width: 100 },
      ],
      rowData: [
        {
          type: 0,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 1,
          text: "sdfasffd",
        },
        {
          type: 0,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 1,
          text: "sdfasffd",
        },
        {
          type: 1,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 0,
          text: "sdfasffd",
        },
        {
          type: 1,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 0,
          text: "sdfasffd",
        },
        {
          type: 0,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 1,
          text: "sdfasffd",
        },
      ],
      acType: ["阿里云短信接口", "腾讯云短信接口"],
      resType: ["问候短信", "感谢短信", "推荐短信"],
      title: "",
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      isTable: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    cancelData() {
      this.$router.push("/home/market/noteMarke");
    },
    saveData() {
      this.$router.go(-1);
    },
    changeFocus() {
      this.isTable = true;
    },
    closePop() {
      this.isTable = false;
    },
    changeBlur() {
      this.isTable = false;
    },
    //添加联系人
    addData(obj) {
      console.log(obj);
      this.isTable = false;
    },
    breakPage(e) {
      storage.setStorage("title", this.title);
    },
  },
  computed: {},
  watch: {},
  created() {
    window.addEventListener("beforeunload", (e) => this.breakPage(e));
    this.title = sessionStorage.getItem("title") || this.$route.params.H;
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", (e) => this.breakPage(e));
    storage.removeStorage("title");
  },
};
</script>
<style lang="less" scoped>
.add-notemarke {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;

  .main {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    border-radius: 8px 8px 0 0;
  }
  .list-herder {
    padding: 0 20px 10px;
  }
  .el-form {
    width: 100%;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    .el-form-item {
      width: 50%;
      margin-right: 0;
      margin-bottom: 8px;
      padding: 0 12px;
      box-sizing: border-box;
      vertical-align: none;
    }
    .theme {
      width: 100%;
    }
    .linkmanren {
      position: relative;
      width: 100%;

      .linkman-abs {
        width: 100%;
        position: absolute;
        z-index: 1000;
        top: 60px;
        left: 0;
        box-shadow: 0px 16px 14px 6px rgba(141, 141, 141, 0.1);
      }
    }
    .el-select {
      width: 100%;
    }
    .el-select /deep/ .el-input {
      width: 100% !important;
      height: 36px !important;
    }
  }

  .el-form-item /deep/ .el-form-item__label {
    padding: 0 !important;
  }
}
</style>
